import BannerAnim, {Element} from 'rc-banner-anim';
import TweenOne from 'rc-tween-one';
import 'rc-banner-anim/assets/index.css';
import '../less/test.less';
const BgElement = Element.BgElement;
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            playSpeed: 2000,
        };
        this.timer_ = this.timer_.bind(this)
    }

    componentDidMount() {
        this.timer_();
    }
    render() {
        const state = this.state;
        return (
            <BannerAnim
                ref="screen"
                prefixCls="banner-user"
                type="acrossOverlay"
                autoPlaySpeed={state.playSpeed}
                onChange={(current)=> {

                }}
                arrow={false}
                onClick={()=> {
                    this.timer_();
                }}
                style={{height: window.innerHeight - 180 - 90,}}>
                <Element
                    prefixCls="banner-user-elem"
                    key="0"
                >
                    <BgElement
                        key="bg"
                        className="bg"
                        style={{
                            background: '#364D79',
                        }}
                    />
                    <TweenOne
                        className="banner-user-title"
                        animation={{y: 30, opacity: 0, type: 'from'}}>
                        Ant Motion Banner
                    </TweenOne>
                    <TweenOne
                        className="banner-user-text"
                        animation={{y: 30, opacity: 0, type: 'from', delay: 100}}
                    >
                        The Fast Way Use Animation In React
                    </TweenOne>
                </Element>
                <Element
                    prefixCls="banner-user-elem"
                    key="1"
                >
                    <BgElement
                        key="bg"
                        className="bg"
                        style={{
                            background: '#64CBCC',
                        }}
                    />
                    <TweenOne
                        className="banner-user-title"
                        animation={{y: 30, opacity: 0, type: 'from'}}>
                        Ant Motion Banner
                    </TweenOne>
                    <TweenOne
                        className="banner-user-text"
                        animation={{y: 30, opacity: 0, type: 'from', delay: 100}}
                    >
                        The Fast Way Use Animation In React
                    </TweenOne>
                </Element>
            </BannerAnim>);
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('content')
);